<template>
  <div class="child">
    <h1>GrandSon组件</h1>
    <h1>拿到的Father的钱有:{{ money }}万</h1>
    <h1>拿到的Father的车品牌:{{ FatherCar.brand }},价格:{{ FatherCar.price }}</h1>
    <!-- <h1>拿到的Father的车品牌:{{ car.brand }},价格:{{ car.price }}</h1> -->
    <button @click="updateMoney(10)">花father的10万</button>
  </div>
</template>

<script lang="ts" setup>
  import { inject } from "vue";
  // 分别接收
  // const money = inject("money");
  // const FatherCar = inject("car");
  // const updateMoney = inject("updateMoney");

  // 解构接收，第一，用变量接收必须名字相同，可以自己改名,后面是设置默认值，不然会报错（因为没有定义这个数据就展示）
  //这个后面的car和前面改名前的car必须同名，不然默认值也不知道赋值给谁
  const {car:FatherCar,money,updateMoney} = inject('fatherData',{car:{brand:'未知',price:0},money:0,updateMoney:(value:number)=>{}})
</script>

<style scoped>
</style>